<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="page-view-size" content="1280*720">
  <link rel="stylesheet" href="styles/base.css">
  <title>熊猫部落-国宝随心看</title>
  <style>
    body {
      position: absolute;
      margin: 0;
      padding: 0;
      width: 1280px;
      height: 720px;
      background: url(images/index-bg.jpg);
      background-color: transparent;
    }

    #title {
      position: absolute;
      z-index: 1000;
      font-size: 30px;
      color: #fff;
      left: 0;
      top: 30px;
      width: 240px;
      text-align: center;
    }

    #page {
      position: absolute;
      font-size: 18px;
      color: #fff;
      right: 105px;
      top: 40px;
    }

    #main-0 {
      position: absolute;
      width: 240px;
      top: 0;
      bottom: 0;
      left: 0;
      background: url(images/panda-class-nav-bg.png) repeat-y;
    }

    #main-0 .item {
      height: 60px;
      line-height: 60px;
      color: #fff;
      text-align: center;
      font-size: 24px;
    }

    #main-0 .item.active {
      color: #088eff;
    }

    #main-0 .item.focus {
      background: #088eff;
      color: #fff;
    }

    #main-view {
      position: absolute;
      left: 0;
      right: 0;
      top: 120px;
      height: 480px;
      overflow: hidden;
    }

    .main-view-scroll {
      position: relative;
    }

    #main-1 {
      position: absolute;
      top: 80px;
      left: 320px;
    }

    #main-1 .item {
      position: absolute;
      width: 258px;
      height: 155px;
      background: url(images/loading-placeholder.png) repeat;
    }

    #main-1 .item img {
      display: block;
      width: 100%;
      height: 100%;
    }

    #main-1 .item-view {
      position: relative;
      height: 40px;
      line-height: 40px;
      font-size: 18px;
      color: #fff;
      overflow: hidden;
    }

    #main-1 .item-text {
      line-height: 40px;
      height: 40px;
      position: absolute;
      white-space: nowrap;
    }

    #main-1-0,
    #main-1-3,
    #main-1-6 {
      left: 0;
    }

    #main-1-1,
    #main-1-4,
    #main-1-7 {
      left: 300px;
    }

    #main-1-2,
    #main-1-5,
    #main-1-8 {
      left: 600px;
    }


    #main-1-0,
    #main-1-1,
    #main-1-2 {
      top: 0;
    }

    #main-1-3,
    #main-1-4,
    #main-1-5 {
      top: 210px;
    }

    #main-1-6,
    #main-1-7,
    #main-1-8 {
      top: 420px;
    }
  </style>
</head>

<body onload="init()" onunload="exit()">
  <div id="title">国宝随心看</div>
  <div id="page"></div>
  <div id="main-0">
    <div id="main-view">
      <div class="main-view-scroll" id="main-0-container"></div>
    </div>
  </div>
  <div id="main-1">
    <!-- <div id="main-1-0" class="item item-focus"></div>
    <div id="main-1-1" class="item item-focus"></div>
    <div id="main-1-2" class="item item-focus"></div>
    <div id="main-1-3" class="item item-focus"></div>
    <div id="main-1-4" class="item item-focus"></div>
    <div id="main-1-5" class="item item-focus"></div>
    <div id="main-1-6" class="item item-focus"></div>
    <div id="main-1-7" class="item item-focus"></div>
    <div id="main-1-8" class="item item-focus"></div> -->
  </div>
</body>
<script src="js/jquery.js"></script>
<script src="config/index.js?v=1"></script>
<script src="api/index.js?v=1"></script>
<script src="js/KeyEvent.js?v=12"></script>
<script src="js/event.js?v=12"></script>
<script src="js/utli.js?v=12"></script>
<script src="js/base.js"></script>

<script>
  var area = [{
    id: 'main-0-',
    index: 0
  }, {
    id: 'main-1-',
    index: 0
  }];
  var isNeed = 0;
  var totalPage = -1;

  // 页面初始化
  function init() {
    getPreFocus();
    getLog({
      programId: '0',
      programName: '国宝随心看-分类',
      ctype: '1',
      account: USERID,
      usermac: MAC,
      platform: '1'
    })
    renderClass();
  }



  function renderClass() {
    var html = '';
    classify = getTypeListByTypeId({
      TYPEID: TYPEIDS.LOOK
    }).TYPEs;
    for (var i = 0, l = classify.length; i < l; i++) {
      html += '<div id="main-0-' + i + '" class="item">' + classify[i].typeName + '</div>'
    }
    $('#main-0-container').html(html);
    renderList(classify[nav].typeId);
  }

  function renderList(typeid) {
    checkMark(nav);
    var html = '';
    var number = 9;
    data = getVodListByTypeId({
      TYPEID: typeid,
      LENGTH: number,
      STATION: page
    });
    if (data.total > 0) {
      totalPage = Math.ceil(data.total / number);
      $('#page').html('第<span class="color">' + page + '</span>页 / 共<span class="color">' + totalPage + '</span>页');
      for (var i = 0, l = data.data.length; i < l; i++) {
        var freeHtml = '';
        if (data.data[i].charge == 0) {
          freeHtml = '<img class="free" src="images/free.png" />'
        }
        html += '<div id="main-1-' + i + '"  class="item item-focus">' + freeHtml +
          '<img src="' + data.data[i].picture[0].picPath0 + '" alt="">' +
          '<div class="item-view">' +
          '<div class="item-text">' + data.data[i].name + '</div>' +
          '</div>' +
          '</div>'
      }
    } else {
      $('#page').html('');
    }

    $('#main-1').html(html)
    onFocus();
  }

  // 获取url参数
  function getPreFocus() {
    var url = window.location.href;
    focusArea = parseInt(GY.getURLParameter("AREA", url) != "" ? GY.getURLParameter(
      "AREA", url) : 0);
    area[focusArea].index = parseInt(GY.getURLParameter("INDEX", url) != "" ? GY.getURLParameter(
      "INDEX", url) : 0);
    nav = parseInt(GY.getURLParameter("NAV", url) != "" ? GY.getURLParameter(
      "NAV", url) : 0);
    page = parseInt(GY.getURLParameter("PAGE", url) != "" ? GY.getURLParameter(
      "PAGE", url) : 1);
    area[0].index = nav;
  }


  // 上键操作
  function keyUp() {
    var index = area[focusArea].index;
    switch (focusArea) {
      case 0:
        if (index > 0) {
          freeFocus();
          nav = --area[focusArea].index;
          page = 1;
          renderList(classify[nav].typeId);
          onFocus()
        }
        break;
      case 1:
        if (index >= 3) {
          freeFocus();
          area[focusArea].index -= 3;
          onFocus()
        } else {
          if (page > 1) {
            freeFocus();
            page--;
            area[focusArea].index = 8;
            renderList(classify[nav].typeId);
          }
        }
        break;
    }
  }



  // 下键操作
  function keyDown() {
    var index = area[focusArea].index;
    switch (focusArea) {
      case 0:
        index++;
        if ($('#' + area[focusArea].id + index).length > 0) {
          freeFocus();
          nav = ++area[focusArea].index;
          page = 1;
          renderList(classify[nav].typeId);
          onFocus()
        }
        break;
      case 1:
        if (index <= 5) {
          index += 3;
          if ($('#' + area[focusArea].id + index).length > 0) {
            freeFocus();
            area[focusArea].index += 3;
            onFocus()
          }
        } else {
          if (page < totalPage) {
            freeFocus();
            page++;
            area[focusArea].index = 0;
            renderList(classify[nav].typeId);
          }
        }
        break;
    }
  }

  // 左键操作
  function keyLeft() {
    var index = area[focusArea].index;
    switch (focusArea) {
      case 0:
        break;
      case 1:
        if (index % 3 != 0) {
          if ($('#' + area[focusArea].id + index).length > 0) {
            freeFocus();
            area[focusArea].index--;
            onFocus()
          }
        } else {
          freeFocus();
          focusArea = 0;
          onFocus()
        }
        break;
    }
  }

  // 右键操作
  function keyRight() {
    var index = area[focusArea].index;
    switch (focusArea) {
      case 0:
        if ($('#main-1 .item').length > 0) {
          freeFocus();
          focusArea = 1;
          area[focusArea].index = 0;
          onFocus()
        }

        break;
      case 1:
        index++;
        if (index % 3 != 0) {
          if ($('#' + area[focusArea].id + index).length > 0) {
            freeFocus();
            area[focusArea].index++;
            onFocus()
          }
        }
        break;
    }
  }

  // 切换大列表索引
  function checkMark(nav) {
    $('#main-0-container .item').eq(nav).addClass('active').siblings('.item').removeClass('active');
  }

  // 回车键操作
  function keyEnter() {
    var index = area[focusArea].index;
    var form = PANDA_PATH + "panda-class.html?AREA=" + focusArea + "&INDEX=" + area[focusArea].index + '&NAV=' +
      area[0].index + '&PAGE=' + page;

    programGoUrl(data.data[index], form);
    // GY.addUrl(PANDA_PATH + 'vod-play.html?VODID=' + data.data[index].ID, form);
    // window.location.href = PANDA_PATH + 'vod-play.html?VODID=' + data.data[index].ID + '&ReturnURL=' + unescape(ReturnURL);
  }

  // 返回键操作
  function keyBack() {
    isNeed = 0;
    GY.goback();
  }

  // 页面退出
  function exit() {

  }

  // 落焦
  function onFocus() {
    var eFocus = $('#' + area[focusArea].id + area[focusArea].index);
    eFocus.addClass('focus');
    starMarquee(eFocus)
  }

  // 失焦 
  function freeFocus() {
    var eFocus = $('#' + area[focusArea].id + area[focusArea].index);
    eFocus.removeClass('focus');
    stopMarquee(eFocus)
  }
</script>

</html>